$(function () {
    // 获取数据
    function init() {
        $.ajax({
            url: bignews.category_list,
            // 记得引入token
            headers: { 'Authorization': localStorage.getItem('bignews_69_token') },
            success: function (res) {
                // console.log(res);
                // 调用模板字符串
                $('tbody').html(template('cateTemp', res))
            },
            dataType: 'json'
        })
    }
    // 调用函数
    init()

    // 新增和编辑的请求函数分装
    function cateOpt(url, data) {
        $.ajax({
            type: 'post',
            url: url,
            headers: { 'Authorization': localStorage.getItem('bignews_69_token') },

            // 有参数记得添加参数
            data: data,
            success: function (res) {
                alert(res.msg)
                // 点击确定新增之后，弹框消失
                $('#cateModal').modal('hide')
                // 文本框刷新
                $('#cateName').val('')
                $('#cateSlug').val('')
                // 页面刷新,封装上面的函数
                init()

            },

            // 判定内容是否重复，重复会报错，所以写了error
            error: function (err) {
                // console.log(err);
                if (err.status == 400) {
                    alert('请不要提交重复内容')
                    $('#cateName').val('')
                    $('#cateSlug').val('')
                }
            }
        })
    }


    // 新增业务
    // 全局定义编辑的id
    let id
    $('#btnOpt').on('click', function () {
        // 获取数据
        // 查看文档需要什么参数
        let name = $('#cateName').val()
        let slug = $('#cateSlug').val()
        // console.log(name, slug);

        // 判定按钮的值是新增时，做新增业务。是编辑时，做编辑业务（上面进行了代码的封装，新增和编辑请求基本相似，除了地址和参数不同，编辑不会出现error的情况，所以可以忽略）
        if ($('#btnOpt').text() == '新增') {
            // 发起ajax请求-新增请求
            cateOpt(bignews.category_add, { name, slug })
        } else {
            //    发起ajax请求=编辑
            cateOpt(bignews.category_edit, { name, slug, id })

        }
    })


    // 删除业务
    $('tbody').on('click', '.btnDel', function () {
        // 看文档，有参数id，拿到id
        let id = $(this).data('id')

        if (confirm('确定要删除')) {
            // 发起请求
            $.ajax({
                // 看文档
                type: 'post',
                url: bignews.category_delete,
                data: { id },
                headers: { 'Authorization': localStorage.getItem('bignews_69_token') },
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    alert('删除成功')
                    init()
                }

            })
        }

    })

    // 实现模态框复用
    // 编辑业务，   动态结构要用事件委托，click后面要加子元素
    $('tbody').on('click', '.btnEdit', function () {
        // 弹出模态框
        $('#cateModal').modal('show')
        // 修改模态框内容
        $('.modal-title').text('编辑业务')
        $('#btnOpt').text('编辑')

        // 填充默认值
        // 获取数据
        let data = $(this).data()
        // 获取到编辑的id值，因为是另一个按钮需要id值，所以需要存变量，放在全局。
        id = data.id
        $('#cateName').val(data.name)
        $('#cateSlug').val(data.slug)

    })


    // 新增业务又要改回去。因为复用一个模态框，并且要把属性弹框改成js弹框，会一闪而过
    $('#xinzengfenlei').on('click', function () {
        // 弹出模态框
        $('#cateModal').modal('show')
        // 修改模态框内容
        $('.modal-title').text('新增业务')
        $('#btnOpt').text('新增')
        $('#cateName').val('')
        $('#cateSlug').val('')
    })
})